<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>

	<meta charset="UTF-8" />
	<title>VAOI || Categorias</title>
	<meta
		content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'
		name='viewport' />

</h:head>

<h:body class="skin-green">
	<ui:composition template="/ADMIN/menuAdmin.xhtml">
		<ui:define name="body">
			<f:view>

				<!-- Site wrapper -->
				<div  style="min-height:100%">


							<f:view>

								<h:form id="form">
									<p:messages id="msg" />

									<div class="panel panel-default" style="height:780px">

										<div class="panel-heading" align="center"
											style="font-family: sans-serif; font-size: 150%;">Categorias</div>

										<div class="panel-body">
											<p:dataTable value="#{categoriasView.categoriaDataModel}"
												var="categoria"
												selection="#{categoriasView.selectedCategorias}" id="tabla"
												paginator="true" rows="5">

												<p:column selectionMode="single" style="width:40px" />

												<p:column filterBy="#{categoria.nombre}"
													sortBy="#{categoria.nombre}">
													<f:facet name="header">
														<h:outputText value="Nombre" />
													</f:facet>
													<h:outputText value="#{categoria.nombre}" />
												</p:column>

												<p:column filterBy="#{categoria.estadoRegistro}"
													sortBy="#{categoria.estadoRegistro}">
													<f:facet name="header">
														<h:outputText value="Estado Registro" />
													</f:facet>
													<h:outputText value="#{categoria.estadoRegistro}" />
												</p:column>

											</p:dataTable>

											<p:spacer height="5px" />

											<div align="center">

												<p:commandButton id="btonCrear" value="Crear"
													action="#{categoriasView.limpiar}"
													styleClass="btn btn-success" icon="ui-icon-plus"
													update=":formDlg2:txtNombre, :formDlg2:idEstado, :formDlg2:messages"
													onclick="$('#dlgModificar').modal('show');" />

												<p:commandButton id="btonEditar" value="Editar"
													action="#{categoriasView.editar()}"
													styleClass="btn btn-primary" icon="ui-icon-pencil"
													update=":formDlg2:txtNombre, :formDlg2:idEstado, :formDlg2:messages"
													binding="#{categoriasView.btnModify}"
													onclick="$('#dlgModificar').modal('show');" />

											</div>

										</div>

									</div>

								</h:form>

								<h:form id="formDlg2">

									<div class="modal fade" id="dlgModificar" tabindex="-1"
										role="dialog" aria-labelledby="myModalLabel"
										aria-hidden="true">
										<div class="modal-dialog">
											<div class="modal-content">
												<div class="modal-header">

													<h4 class="modal-title" align="center">Crear/Modificar
														Categoria</h4>
												</div>
												<div class="modal-body" id="panelModificar">

													<p:messages id="messages" autoUpdate="false"
														closable="true" />

													<h:outputText id="msgNombre" value=" Nombre: " />
													<p:inputText id="txtNombre" type="text"
														class="form-control" binding="#{categoriasView.txtNombre}" />

													<h:outputText id="msgEstadoRegistro" value=" Estado: " />
													<h:selectOneMenu id="idEstado"
														class="form-control text-center"
														value="#{categoriasView.estado}">
														<f:selectItem itemLabel="Activo" itemValue="A" />
														<f:selectItem itemLabel="Retirado" itemValue="R" />
													</h:selectOneMenu>

													<p:spacer height="10px" />

													<div align="center">
														<p:commandButton id="btnSave"
															binding="#{categoriasView.btnSave}" value="Guardar"
															class="btn btn-primary"
															action="#{categoriasView.guardarCategoria()}"
															update=":form, :form:tabla, :formDlg2:messages" />

														<p:commandButton value="Cerrar" class="btn btn-danger"
															action="#{categoriasView.limpiar}"
															update=":form, formDlg2"
															onclick="$('#dlgModificar').modal('hide');" />

													</div>

												</div>

											</div>
										</div>
									</div>
								</h:form>
								<!-- Fin Dialogo Modificar -->

							</f:view>

					</div>
				<!-- ./wrapper -->

			</f:view>
		</ui:define>
	</ui:composition>
</h:body>

</html>